<template>
  <div class="financing_config_detail_page">
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        <h5 class="name">融资参数信息</h5>
      </div>
      <div class="content">
        <el-row class="row">
          <el-col :span="12">
            <div class="cell">
              <div class="key">编号：</div>
              <div class="value">{{ detailObj.code }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="cell">
              <div class="key">金融机构产品名称：</div>
              <div class="value">{{ detailObj.projectName }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <div class="cell">
              <div class="key">金融机构名称：</div>
              <div class="value">{{ detailObj.jigouName }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="cell">
              <div class="key">核心企业名称：</div>
              <div class="value">{{ detailObj.hexinName }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <div class="cell">
              <div class="key">担保费利率（%）：</div>
              <div class="value">{{ detailObj.guaranteeRate }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="cell">
              <div class="key">融资利率（%）：</div>
              <div class="value">{{ detailObj.financingRate }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <div class="cell">
              <div class="key">罚息利率（%）：</div>
              <div class="value">{{ detailObj.punishRate }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="cell">
              <div class="key">服务费利率（%）：</div>
              <div class="value">{{ detailObj.serviceRate }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <div class="cell">
              <div class="key">状态：</div>
              <div class="value">{{ detailObj.status === '0' ? '启用' : '禁止' }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { financingConfigDetail } from '@/api/argumentConfig'

export default {
  data() {
    return {
      // 状态列表: '0': 启用; '1': 禁止;
      id: '',
      detailObj: {},
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getFinancingConfigDetail()
    }
  },
  methods: {
    getFinancingConfigDetail() {
      financingConfigDetail(this.id).then((res) => {
        this.detailObj = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.financing_config_detail_page {
  .mod {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 20px 16px 24px;
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .icon {
        width: 3px;
        height: 16px;
        border-radius: 1px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
    .content {
      .row {
        margin-bottom: 38px;
        .cell {
          display: flex;
          align-items: center;
          .key {
            color: #777;
            font-size: 14px;
            width: 195px;
            text-align: right;
          }
          .value {
            color: #333;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
